<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="~{ fragment/common::common_head}" />
    <title>【 分类专栏 】 - EasyBlog博客</title>
    <style type="text/css">
        a:hover {
            color: #ca0c16 !important;
        }
    </style>
</head>
<body>


<!--导航-->
<div th:replace="~{ fragment/nav :: navbar}"></div>

<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <!--左边的卡片-->
        <div class="four wide column m-mobile-hide"
             style="max-width: 315px !important;padding-top: 0 !important;padding-right: 0 !important;">
            <!--用户信息-->
            <div th:replace="~{ fragment/userinfo_sidebar::sidebar_userinfo}"></div>

            <!--分类-->
            <div th:replace="~{ fragment/userinfo_sidebar::sidebar_category}"></div>

            <!--最新文章-->
            <div th:replace="~{ fragment/userinfo_sidebar::sidebar_newest_article}"></div>

            <!--归档-->
            <div th:replace="~{ fragment/userinfo_sidebar::sidebar_archives}"></div>

            <h4 class="ui horizontal divider header m-margin-top-large">联系开发者</h4>
            <div class="ui centered card" style="width: 11em">
                <img src="../static/images/wechat.jpg" th:src="@{/static/images/wechat.jpg}" alt=""
                     class="ui rounded image">
            </div>
        </div>

        <!--右边的分类内容-->
        <div class="twelve wide column" style="padding-top: 0 !important;">
            <!--分类的header-->
            <div class="ui top attached segment" style="border: none;border-radius: unset;border-bottom: #f0f1f2 3px solid;">
                <div class="ui middle aligned two column grid">
                    <input id="category_Id" hidden="hidden" th:value="${category.getCategoryId()}"/>
                    <input id="care_id" hidden="hidden" th:value="${care}">
                    <!--分类的标题的图片-->
                    <div class="m-inline-block m-margin-top m-margin-bottom m-margin-left">
                        <img src="https://img-blog.csdnimg.cn/20190927151132530.png"
                             style="border-radius: 5px"
                             th:src="@{${category.getCategoryImageUrl()}}"
                             class="ui top aligned  image image-122x122" th:alt="${category.getCategoryName()}">
                        <div class="column m-inline-block m-margin-left">
                            <h3 class="ui m-black m-inline-block header" th:text="${category.getCategoryName()}">
                                数据结构与算法</h3>
                            <button id="care-btn"
                                    class="ui tiny red basic button  m-inline-block m-margin-top m-margin-left"
                                    style="font-size: 1rem;">
                                关注
                            </button>
                            <p th:if="${!#strings.isEmpty(category.getCategoryDescription())}"
                               style="color: #666;font-size: 14.5px ;margin-top: 12px;max-width: 800px"
                               th:text="${category.getCategoryDescription()}"></p>
                            <div class="right aligned column m-margin-top-small">
                           <span style="color: #888888;font-size: 14.5px;">
                              <span>关注数：<span style="color: dodgerblue !important;"
                                              th:text="${category.getCategoryCareNum()}">0</span>
                              </span>
                              <span class="m-margin-left-big">
                                  文章数：<span style="color: dodgerblue !important;"
                                            th:text="${category.getCategoryArticleNum()}">23</span>
                              </span>
                              <span class="m-margin-left-big">
                                  访问量：<span style="color: dodgerblue !important;"
                                            th:text="${category.getCategoryClickNum()}">22255</span>
                              </span>
                           </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--每个分类的文章-->
            <div class="ui top attached  segment" style="margin-top: 0 !important;border: none;padding: 0;">
                <div th:if="${!#lists.isEmpty(articlePages)&&!#lists.isEmpty(articlePages.getList())&&#lists.size(articlePages.getList())>0}" th:each="article:${articlePages.getList()}" class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear" style="padding-bottom: 20px !important;padding-top: 10px !important;border-bottom: #f0f1f2 3px solid;">
                    <div class="ui mobile reversed stackable grid">
                        <div class="eleven wide column">
                            <div class="ui stackable  grid">
                                    <div class="two wide column m-mobile-hide" style="max-width: 56px;padding-right: 0 !important;">
                                        <div th:if="${article.getArticleType() eq '0'}" class="ui red mini basic label">
                                            <span>原创</span>
                                        </div>
                                        <div th:if="${article.getArticleType() eq '1'}" class="ui green mini basic label">
                                            <span>转载</span>
                                        </div>
                                        <div th:if="${article.getArticleType() eq '2'}" class="ui blue mini basic label">
                                            <span>翻译</span>
                                        </div>
                                    </div>
                                    <div class="fourteen wide column" style="padding-top: 0px !important;padding-left: 10px !important;">
                                        <a  th:href="@{/article/details/{id}(id=${article.getArticleId()})}" th:text="${article.getArticleTopic()}" class="ui m-inline-block m-margin-top-small m-margin-bottom-small m-article-list-title"></a>
                                    </div>
                            </div>
                            <!--文章内容预览-->
                            <p class="m-column_article_desc" th:text="${#strings.abbreviate(article.getArticleContent(),200)}">
                            </p>
                            <div class="ui stackable grid">
                                <div class="eleven wide column">
                                    <div class="ui mini horizontal link list">
                                        <div class="item">
                                            <div th:if="${article.getArticleType() eq '0'}" class="ui red mini basic label m-mobile-show-only">
                                                <span>原创</span>
                                            </div>
                                            <div th:if="${article.getArticleType() eq '1'}" class="ui green mini basic label m-mobile-show-only">
                                                <span>转载</span>
                                            </div>
                                            <div th:if="${article.getArticleType() eq '2'}" class="ui blue mini basic label m-mobile-show-only">
                                                <span>翻译</span>
                                            </div>
                                        </div>
                                        <div class="item m-mobile-hide" style="margin-left: 0 !important;">
                                            <img th:src="${author.getUserHeaderImgUrl()}"
                                                 src="https://unsplash.it/100/100?image=1005" alt=""
                                                 class="ui avatar image m-mobile-hide">
                                            <div class="content"><a href="#" class="m-comment-font-user" th:text="${author.getUserNickname()}">黄鑫</a></div>
                                        </div>
                                        <div class="item">
                                            <i class="calendar icon"></i>[[${#dates.format(article.getArticlePublishTime(),'yyyy年MM月dd hh:mm:ss')}]]
                                        </div>
                                        <div class="item">
                                            <i class="eye icon"></i>[[${article.getArticleClick()}]]
                                        </div>
                                        <div class="item">
                                            <i class="comment alternate icon"></i>[[${article.getArticleCommentNum()}]]
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="five wide column">
                            <a target="_blank" class="category-img">
                                <img style="border-radius: 0;min-height: 170px;width: 300px !important;" th:if="${article.getArticleFirstPicture()==null}" src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" th:alt="${article.getArticleTopic()}"  class="ui rounded image m-prev-image-style">
                                <img style="border-radius: 0;min-height: 170px;width: 300px !important;" th:if="${article.getArticleFirstPicture()!=null}" th:src="@{${article.getArticleFirstPicture()}}" th:alt="${article.getArticleTopic()}" class="ui rounded image m-prev-image-style">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!--分页按钮-->
            <div th:if="${articlePages.getTotal()>10}" class="ui bottom attached segment"
                 style="border:none;border-top: #f0f1f2 3px solid;">
                <div class="ui middle aligned two column grid">
                    <div  style="margin: 5px auto;float: left !important;">
                        <div class="ui buttons">
                            <a th:href="@{/category/details/{categryId}/{userId}(categryId=${category.getCategoryId()},userId=${author.getUserId()},page=${articlePages.getPrePage()})}">
                                <button class="ui  button" style="background: white !important;font-weight: 100 !important;"> <i class="step backward icon"></i></button>
                            </a>
                            <a th:each="pageNo:${articlePages.getNavigatepageNums()}"
                               th:href="@{/category/details/{categryId}/{userId}(categryId=${category.getCategoryId()},userId=${author.getUserId()},page=${pageNo})}">
                                <button class="ui button pages">
                                    [[${pageNo}]]
                                </button>
                            </a>
                            <a th:href="@{/category/details/{categryId}/{userId}(categryId=${category.getCategoryId()},userId=${author.getUserId()},page=${articlePages.getNextPage()})}">
                                <button class="ui right button"
                                        style="background: white !important;font-weight: 100 !important;">  <i class="step forward icon"></i>
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>


            <!--没有任何数据时候显示-->
            <div th:if="${articlePages.getTotal()==0}" class="ui bottom attached segment"
                 style="border-top: none !important;">
                <div class="ui middle aligned two column grid">
                    <div style="color: grey;margin: 10em auto !important;float: left !important;font-size: 16px">
                        分类 <strong><span style="color: black !important;" th:text="${category.getCategoryName()}"></span></strong> 目前没有任何文章
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<input type="hidden" id="userId" th:value="${author.getUserId()}">
<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{fragment/common :: footbar}"></div>
</body>

<th:block th:replace="~{fragment/common :: common_js}"/>
<script>
    $('.m-mobile-lr-clear:last').css('border-bottom','none');
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    /*
     * 显示分页页码标识
     */
    function showCurrentPageNum() {
        if([[${articlePages eq null}]]) return;
        try{
            let obj = document.getElementsByClassName('pages');
            let page = [[${articlePages.pageNum}]];
            for (let i = 0; i < obj.length; i++) {
                if (obj[i].textContent == page) {
                    $(obj[i]).css("cssText", "background:#ddd !important");
                }
            }
        }catch (e) {
            console.log(e);
        }
    }
</script>
<!--控制关注按钮的状态-->
<script type="text/javascript">
    //关注按钮样式切换
    $('#care-btn').ready(function () {
        changeBtn();
    });

    function changeBtn() {
        let str = $('#care_id').val();
        if ("false" === str) {
            $('#care-btn').css("color", "inherit").text("关注");
            $('#care-btn').addClass("red");
            $('#care-btn').addClass("basic");
            $('#care-btn').mouseenter(function () {
                $('#care-btn').css("background", "#DB2828");
                $('#care-btn').addClass("red");
                $('#care-btn').css("color", "#ffffff").text("关注");
                $('#care-btn').text("关注");
                $('#care-btn').removeClass("basic");
            });
            $('#care-btn').mouseleave(function () {
                $('#care-btn').css("color", "inherit").text("关注");
                $('#care-btn').text("关注");
                $('#care-btn').addClass("basic");
            });
        } else {
            $('#care-btn').removeClass("red");
            $('#care-btn').addClass("basic");
            $('#care-btn').addClass("grey");
            $('#care-btn').css("color", "#7c7b7c").text("已关注");
            $('#care-btn').mouseenter(function () {
                $('#care-btn').removeClass("basic");
                $('#care-btn').removeClass("grey");
                $('#care-btn').css("background", "#fde3e4");
                $('#care-btn').css("color", "red").text("取消关注");
            });
            $('#care-btn').mouseleave(function () {
                $('#care-btn').css("box-shadow", "none");
                $('#care-btn').css("color", "snow");
                $('#care-btn').addClass("basic");
                $('#care-btn').addClass("grey");
                $('#care-btn').css("color", "#7c7b7c").text("已关注");
            });
        }
    }

    $('#care-btn').click(function () {
        //异步请求
        var id = $('#category_Id').val();
        var btnHtml = $('#care-btn').html();
        if ("关注" === btnHtml) {
            $.ajax({
                url: "/category/details/care/" + id,
                method: "GET",
                sync: true,
                data: {userId: $('#userId').val()},
                dataType: "text",
                success: function () {
                    $('#care_id').val("true");
                    changeBtn();
                },
                error: function (ajaxResult) {
                    showErrorMessage(ajaxResult.message);
                }
            })
        } else if ("取消关注" === btnHtml) {
            $.ajax({
                url: "/category/details/cancelCare/" + id,
                method: "GET",
                sync: true,
                data: {userId: $('#userId').val()},
                dataType: "text",
                success: function () {
                    $('#care_id').val("false");
                    changeBtn();
                },
                error: function (ajaxResult) {
                    showErrorMessage(ajaxResult.message);
                }
            })
        }
    })
</script>

</html>